<template>
	<button class="button" :style="{
			backgroundColor: bgColor ? bgColor : bgColorCom(colorType),
			opacity: opacity,
			color:color,
				 }" @touchstart="btnstart" @touchend="btnend" @click="bandTap" >
		{{name}}
	</button>
</template>

<script>
	export default {
		data() {
			return {
				opacity: 1,
			}
		},
		props: {
			round: {
				type: [Number, String]
			},
			colorType: {
				type: String
			},
			name: {
				default: '确定'
			},
			bgColor: {
				type: String
			},
			color: {
				type: String,
				default: '#ffffff'
			},
		},
		computed: {

		},
		methods: {
			bandTap() {
				this.$emit('click')
			},
			bgColorCom(type) {
				let color = "#eee"
				switch (type) {
					case 'topic':
						color = '#f05a23'
						break;
					case 'Institution':
						color = 'red'
						break;
					case 'intermediary':
						color = "skyblue"
						break;
						defult:
							break
						return
				}
				return color
			},

			btnstart() {
				this.opacity = 0.6
			},
			btnend() {
				this.opacity = 1
			},
		}
	}
</script>


<style less="scss" scoped>
	.button {
		width: 600rpx;
		height: 80rpx;
		border-radius: 40rpx;
		font-size: 30rpx;
		line-height: 80rpx;
		text-align: center;
		border: none !important;
	}
	button::after {
		border: 0 !important;
	}
</style>